import React, { useState, useEffect, useCallback } from 'react'
import style from './index.module.less';
import { httpPost, httpGet } from '@/axios';
import { streamingDownload } from '@/utils';
import Table1 from "@/components/tables"
import dayjs from "dayjs"
import { Button, Form, Space, DatePicker, Select } from 'antd';
const { RangePicker } = DatePicker;
const defaultSearchData = { value: 'form1', start: dayjs().subtract(30, 'day'), end: dayjs() }

const BusinessReport = () => {
  const [form] = Form.useForm();
  const [tableData, setTableData] = useState([])
  const [searchObj, setSearchObj] = useState(defaultSearchData);
  const [searchData, setSearchData] = useState("name")

  const enterBoundCall = async () => {
    const { start, end, value, yangpin } = searchObj
    if (!value) {
      return;
    }
    const res = await httpGet(`/form/${value}/download`, { 
      start: start ? start.format('YYYY-MM-DD') : "", 
      end: end ? end.format('YYYY-MM-DD') : "",
      sortType: searchData === "name" ? "asc" : "desc", // desc
      sortField: searchData,
      yangpin
    }, { responseType: "blob" });
    if (res) {
      streamingDownload(res, '报表统计')
    }
  }
  const getTableData = useCallback(async () => {
    const { start, end, value, yangpin } = searchObj; 
    if (!value) {
      return;
    }
    const res = await httpPost(`/form/${searchObj?.value}`, { 
      start: start ? start.format('YYYY-MM-DD') : "", 
      end: end ? end.format('YYYY-MM-DD') : "",
      sortType: searchData === "name" ? "asc" : "desc", // desc
      sortField: searchData,
      yangpin
    });
    if (res) {
      setTableData(res?.data || {})
    }
  }, [searchObj, searchData])
  const onchange = (e) => {
    setSearchData(e)
  }
  const handleFinish = (value) => {
    if (value?.time?.length > 0) {
      setSearchObj((v) => {
        return {
          ...v,
          start: dayjs(value?.time[0]),
          end: dayjs(value?.time[1]),
          ...value
        }
      })
    } else {
      setSearchObj((v) => ({...v, start: undefined, end: undefined, ...value}))
    }
  }
  useEffect(() => {
    getTableData()
  }, [getTableData])
  return (
    <>
      <div style={{ background: "#fff", borderRadius: "20px", padding: 15 }}>
        <Form initialValues={{ value: "form1", time: [defaultSearchData?.start, defaultSearchData?.end] }} layout="inline" form={form} onFinish={handleFinish} >
          <Form.Item label="报表类型" name="value">
            <Select onChange={(e) => { setSearchObj((v) => ({ ...v, value: e  })) }} style={{ width: 200 }}>
              <Select.Option key="form1" vlaue="form1">登记员报表</Select.Option>
              <Select.Option key="form2" vlaue="form2">模版编号报表</Select.Option>
              <Select.Option key="form3" vlaue="form3">POS报表</Select.Option>
              <Select.Option key="form4" vlaue="form4">SHOP报表</Select.Option>
              <Select.Option key="form5" vlaue="form5">堆货方式报表</Select.Option>
              <Select.Option key="form6" vlaue="form6">销售员报表</Select.Option>
              <Select.Option key="form7" vlaue="form7">销售员2报表</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item label="时间" name="time">
            <RangePicker placeholder="请选择" />
          </Form.Item>
          <Form.Item label="样品" name="yangpin">
            <Select placeholder="请选择样品" style={{ width: 140 }}>
              <Select.Option value="">ALL</Select.Option>
              <Select.Option value="T">T</Select.Option>
              <Select.Option value="F">F</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item>
            <Space>
              <Button type="primary" htmlType="submit">
                搜索
              </Button>
              <Button onClick={enterBoundCall}>
                下载查询数据
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </div>      
      <div className={style.table_big_box}>
        <Table1 tableData={tableData} onchange={onchange}/>
      </div>
    </>
  )
}

export default BusinessReport;
